﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="MSHelpMeHD.ItemsPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MSHelpMeHD"
    xmlns:data="using:MSHelpMeHD.Data"
    xmlns:common="using:MSHelpMeHD.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>

        <!-- Collection of items displayed by this page -->
        <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding Items}"
            d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
        <Style x:Key="SearchButtonStyle" TargetType="Button">
        	<Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/>
        	<Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>
        	<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>
        	<Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}"/>
        	<Setter Property="Padding" Value="12,4,12,4"/>
        	<Setter Property="HorizontalAlignment" Value="Left"/>
        	<Setter Property="VerticalAlignment" Value="Center"/>
        	<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
        	<Setter Property="FontWeight" Value="SemiBold"/>
        	<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="Button">
        				<Grid>
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup x:Name="CommonStates">
        							<VisualState x:Name="Normal"/>
        							<VisualState x:Name="PointerOver">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ColorAnimation Duration="0" To="#FF049FF1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border" d:IsOptimized="True"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Pressed">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ColorAnimation Duration="0" To="#FF04477C" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border" d:IsOptimized="True"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Disabled">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ColorAnimation Duration="0" To="#FFD4D4D4" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border" d:IsOptimized="True"/>
        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        						<VisualStateGroup x:Name="FocusStates">
        							<VisualState x:Name="Focused">
        								<Storyboard>
        									<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
        									<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Unfocused"/>
        							<VisualState x:Name="PointerFocused"/>
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
        					<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="#FF065FB9">
        						<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4"/>
        					</Border>
        					<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
        					<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
        				</Grid>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="240"/>
            <RowDefinition Height="*"/>
			<RowDefinition Height="80"/>
        </Grid.RowDefinitions>

        <!-- Horizontal scrolling grid used in most view states -->
        <GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemsGridView"
            AutomationProperties.Name="Items"
            TabIndex="1"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
            ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick" Grid.Row="2" FontFamily="Global User Interface"/>

        <!-- Horizontal scrolling grid used in most view states -->

        <!-- Vertical scrolling list only used when snapped -->

        <!-- Back button and page title -->
        <Grid>
        	<Grid.Background>
        		<ImageBrush ImageSource="Assets/title_bg.png"/>
        	</Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}" Foreground="#DEFFFFFF"/>
			<Image x:Name="image" HorizontalAlignment="Right" VerticalAlignment="Center" Source="Assets/Logo2.png" Grid.Column="1"/>
        </Grid>
        <Grid x:Name="searchPanel" Grid.Row="1">
        	<Grid.RowDefinitions>
        		<RowDefinition Height="240"/>
        		<RowDefinition Height="*"/>
        	</Grid.RowDefinitions>
        	<Grid x:Name="grid" VerticalAlignment="Top" HorizontalAlignment="Center" Width="700" Margin="0,100,0,0" Height="80">
        		<Grid.ColumnDefinitions>
        			<ColumnDefinition Width="*"/>
        			<ColumnDefinition Width="60"/>
        		</Grid.ColumnDefinitions>
        		<TextBox x:Name="txtSearchText" Text="Enter your question here..." FontSize="21.333" BorderThickness="1" FontFamily="Segoe UI Light" KeyUp="txtSearchText_KeyUp" TextChanged="txtSearchText_TextChanged" GotFocus="txtSearchText_GotFocus" VerticalAlignment="Center" Height="60" Margin="0,0,1,0" Padding="10,14,10,5"/>
        	<Button x:Name="btnSearch" Click="btnSearch_Click" BorderBrush="{x:Null}" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Width="60" Height="60" Style="{StaticResource SearchButtonStyle}">
			<Image Source="Assets/Search2.png"/>
			</Button>
        	</Grid>
        	<Button x:Name="btnTakePicture" Content="Photo" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{x:Null}" FontSize="64" Click="btnTakePicture_Click" Visibility="Collapsed" Grid.RowSpan="2"/>
        </Grid>
		<StackPanel x:Name="stackPanel" Grid.Row="1" VerticalAlignment="Bottom" Orientation="Horizontal" Margin="0,0,0,10">
		<TextBlock x:Name="textBlock" Text="My Favorites" Style="{StaticResource PageHeaderTextStyle}" Margin="10,0,10,5" FontSize="48"/>
		<TextBlock Text="(" FontSize="26.667" VerticalAlignment="Bottom" Foreground="#FF04477C"/>
		<TextBlock Text="{Binding DefaultViewModel.SampleSource.FlaggedCount, ElementName=pageRoot}" FontSize="26.667" VerticalAlignment="Bottom" Foreground="#FF04477C"/>
		<TextBlock Text=")" FontSize="26.667" VerticalAlignment="Bottom" Foreground="#FF04477C"/>
		</StackPanel>
		<Grid Grid.Row="3">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="140"/>
				<ColumnDefinition Width="200"/>
				<ColumnDefinition Width="*"/>
				<ColumnDefinition Width="200"/>
			</Grid.ColumnDefinitions>
			<TextBlock Text="Powered by" Style="{StaticResource PageHeaderTextStyle}" FontSize="26.667" VerticalAlignment="Center" Margin="0" HorizontalAlignment="Center"/>
			<Image Grid.Column="1" Source="Assets/bing.png" Height="32" HorizontalAlignment="Left" Margin="0,30,0,0"/>
					<TextBlock Grid.Column="3" Text="V 1.0" Style="{StaticResource HeaderTextStyle}" VerticalAlignment="Bottom" HorizontalAlignment="Right" Padding="8" Margin="0,0,-2,0" FontSize="32"/>
					</Grid>
        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
        		<VisualState x:Name="FullScreenLandscape"/>
        		<VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
        		<VisualState x:Name="FullScreenPortrait">
        			<Storyboard>
        				<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
        					<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
        				</ObjectAnimationUsingKeyFrames>
        			</Storyboard>
        		</VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
        		<VisualState x:Name="Snapped">
        			<Storyboard>
        				<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
        					<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
        				</ObjectAnimationUsingKeyFrames>
        				<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
        					<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
        				</ObjectAnimationUsingKeyFrames>
        				<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid">
        					<DiscreteObjectKeyFrame KeyTime="0">
        						<DiscreteObjectKeyFrame.Value>
        							<x:Double>300</x:Double>
        						</DiscreteObjectKeyFrame.Value>
        					</DiscreteObjectKeyFrame>
        				</ObjectAnimationUsingKeyFrames>
        				<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">
        					<DiscreteObjectKeyFrame KeyTime="0">
        						<DiscreteObjectKeyFrame.Value>
        							<Visibility>Collapsed</Visibility>
        						</DiscreteObjectKeyFrame.Value>
        					</DiscreteObjectKeyFrame>
        				</ObjectAnimationUsingKeyFrames>
        				<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="itemGridView">
        					<DiscreteObjectKeyFrame KeyTime="0">
        						<DiscreteObjectKeyFrame.Value>
        							<Visibility>Collapsed</Visibility>
        						</DiscreteObjectKeyFrame.Value>
        					</DiscreteObjectKeyFrame>
        				</ObjectAnimationUsingKeyFrames>
        				<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="stackPanel">
        					<DiscreteObjectKeyFrame KeyTime="0">
        						<DiscreteObjectKeyFrame.Value>
        							<Visibility>Collapsed</Visibility>
        						</DiscreteObjectKeyFrame.Value>
        					</DiscreteObjectKeyFrame>
        				</ObjectAnimationUsingKeyFrames>
        			</Storyboard>
        		</VisualState>
        	</VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
